import React from "react";
import { Outlet, useNavigate } from "react-router-dom";

/*
    目标：
        在跳转页面的时候，把参数带上

        有三种方式：
            1. 动态路由
                path="/about/:id"
            2. query传参方式 url?xxx=xxx


*/

export default function App4() {
  const nav = useNavigate();
  const dynamicRoute = () => {
    //   演示使用 动态路由的方式带数据
    // 1. 在path上先写上 动态路由
    // 2. 在path对应的页面使用 useParams 的hook 进行参数获取
    nav("/about/99885544");
  };

  const queryParams = () => {
    //   演示query传递参数
    //   1. 需要在跳转的路径上添加 ?数据=值 的参数
    //   2. 在对应跳转的组件里面使用 useSerachParams 获取数据
    nav("/list?id=88");
  };

  const stateParams = () => {
    // 1. 在navigate函数的第二个参数里面添加state参数，可以传递一个对象
    // 2. 在对应的组件里面使用 useLocation 获取数据
    nav("/detail", {
      state: {
        id: 999,
        name: "李狗蛋",
      },
    });
  };
  return (
    <div>
      <button onClick={dynamicRoute}>动态路由携带参数</button>
      <button onClick={queryParams}>query传参</button>
      <button onClick={stateParams}>state传递参数</button>
      <Outlet />
    </div>
  );
}
